<template>
  <CardLarge title="监控" :height="height">
    <template #action>
      <el-icon class="arrange-btn" @click="setting">
        <SvgIcon icon-name="setting-two" />
      </el-icon>
    </template>
    <template #default>
      <div id="divPlugin" class="player"></div>
    </template>
  </CardLarge>
  <el-drawer
    v-model="drawerVisible"
    title="播放设置"
    size="640"
    modal-class="setting-drawer-modal">
    <section class="setting-wrap">
      <div class="left">
        <div id="divPlugin" class="plugin"></div>

        <fieldset class="login">
          <legend>登录</legend>
          <table cellpadding="0" cellspacing="3" border="0">
            <tbody>
              <tr>
                <td class="tt">IP地址</td>
                <td><input id="loginip" type="text" class="txt" /></td>
                <!-- <td><input id="loginip" type="text" class="txt" value="10.8.98.100" /></td> -->
                <td class="tt">端口号</td>
                <td><input id="port" type="text" class="txt" /></td>
              </tr>
              <tr>
                <td class="tt">用户名</td>
                <td>
                  <input id="username" type="text" class="txt" value="admin" />
                </td>
                <td class="tt">密码</td>
                <td><input id="password" type="password" class="txt" /></td>
                <!-- <td><input id="password" type="password" class="txt" value="abcd1234" /></td> -->
              </tr>
              <tr>
                <td class="tt">设备端口</td>
                <td colspan="2">
                  <input id="deviceport" type="text" class="txt" />（可选参数）
                </td>
                <td>
                  窗口分割数&nbsp;
                  <select class="sel2" @change="changeWndNum">
                    <option value="1" selected>1x1</option>
                    <option value="12">1x2</option>
                    <option value="21">2x1</option>
                    <option value="2">2x2</option>
                    <option value="3">3x3</option>
                    <option value="4">4x4</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">RTSP端口</td>
                <td colspan="3">
                  <input id="rtspport" type="text" class="txt" />（可选参数）
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <input
                    type="button"
                    class="btn2"
                    value="登录(http)"
                    @click="clickLogin(1)" />
                  <input
                    type="button"
                    class="btn2"
                    value="登录(https)"
                    @click="clickLogin(2)" />

                  <input
                    type="button"
                    class="btn"
                    value="退出"
                    @click="clickLogout()" />
                  <input
                    type="button"
                    class="btn2"
                    value="获取基本信息"
                    @click="clickGetDeviceInfo()" />
                </td>
              </tr>
              <tr>
                <td class="tt">已登录设备</td>
                <td>
                  <select
                    id="ip"
                    class="sel"
                    @change="
                      () => {
                        getChannelInfo();
                        getDevicePort();
                      }
                    "></select>
                </td>
                <td class="tt">通道列表</td>
                <td>
                  <select id="channels" class="sel"></select>
                </td>
              </tr>
              <tr>
                <td class="tt">码流加密秘钥</td>
                <td>
                  <input
                    id="szSecretKey"
                    type="password"
                    class="txt"
                    value="" />
                </td>
                <td>
                  <!--  <input type="button" class="btn2" value="开始取流" @click="clickGetStream();" /> -->
                  <input
                    type="button"
                    class="btn2"
                    value="设置秘钥"
                    @click="setSecretKey()" />
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="开始预览(直连)"
                    @click="clickStartRealPlay(false)" />
                </td>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="开始预览(代理)"
                    @click="clickStartRealPlay(true)" />
                </td>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="停止预览"
                    @click="clickStopRealPlay()" />
                </td>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="停止预览全部"
                    @click="clickStopAllRealPlay()" />
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="设置文本叠加"
                    @click="setTextOverlay()" />
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
        <fieldset class="ipchannel">
          <legend>数字通道</legend>
          <table width="100%" cellpadding="0" cellspacing="3" border="0">
            <tbody>
              <tr>
                <td>
                  <input
                    type="button"
                    class="btn"
                    style="width: 200px"
                    value="获取数字通道列表"
                    @click="clickGetDigitalChannelInfo()" />
                </td>
              </tr>
              <tr>
                <td>
                  <div class="digitaltdiv">
                    <table
                      id="digitalchannellist"
                      class="digitalchannellist"
                      cellpadding="0"
                      cellspacing="0"
                      border="0"></table>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
      </div>
      <div class="left">
        <fieldset class="preview">
          <legend>预览</legend>
          <table cellpadding="0" cellspacing="3" border="0">
            <tbody>
              <tr>
                <td class="tt">码流类型</td>
                <td>
                  <select id="streamtype" class="sel">
                    <option value="1">主码流</option>
                    <option value="2">子码流</option>
                    <option value="3">第三码流</option>
                    <!-- <option value="4">转码码流（虚拟码流）</option> -->
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">音量</td>
                <td>
                  <input
                    type="text"
                    id="volume"
                    class="txt"
                    value="50"
                    maxlength="3" />&nbsp;<input
                    type="button"
                    class="btn"
                    value="设置"
                    @click="clickSetVolume()" />（范围：0~100）
                </td>
                <td>
                  <input
                    type="button"
                    class="btn"
                    value="打开声音"
                    @click="clickOpenSound()" />
                  <input
                    type="button"
                    class="btn"
                    value="关闭声音"
                    @click="clickCloseSound()" />
                </td>
              </tr>
              <tr>
                <td class="tt">对讲通道</td>
                <td>
                  <select id="audiochannels" class="sel"></select>
                  <input
                    type="button"
                    class="btn"
                    value="获取通道"
                    @click="clickGetAudioInfo()" />
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <input
                    type="button"
                    class="btn"
                    value="抓图jpg"
                    @click="clickCapturePic('.jpg')" />
                  <input
                    type="button"
                    class="btn"
                    value="抓图bmp"
                    @click="clickCapturePic('.bmp')" />
                  <input
                    type="button"
                    class="btn"
                    value="抓图上传"
                    @click="clickCapturePicData()" />
                  <input
                    type="button"
                    class="btn"
                    value="开始录像"
                    @click="clickStartRecord('realplay')" />
                  <input
                    type="button"
                    class="btn"
                    value="停止录像"
                    @click="clickStopRecord('realplay')" />
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <input
                    type="button"
                    class="btn2"
                    value="启用电子放大"
                    @click="clickEnableEZoom()" />
                  <input
                    type="button"
                    class="btn2"
                    value="禁用电子放大"
                    @click="clickDisableEZoom()" />
                  <input
                    type="button"
                    class="btn2"
                    value="启用3D放大"
                    @click="clickEnable3DZoom()" />
                  <input
                    type="button"
                    class="btn2"
                    value="禁用3D放大"
                    @click="clickDisable3DZoom()" />
                  <input
                    id="fullbtn"
                    type="button"
                    class="btn"
                    value="全屏"
                    @click="clickFullScreen()" />
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
        <fieldset class="ptz">
          <legend>云台控制</legend>
          <table cellpadding="0" cellspacing="3" border="0" class="left">
            <tbody>
              <tr>
                <td>
                  <input
                    type="button"
                    class="btn"
                    value="左上"
                    onmousedown="mouseDownPTZControl(5);"
                    onmouseup="mouseUpPTZControl();" />
                  <input
                    type="button"
                    class="btn"
                    value="上"
                    onmousedown="mouseDownPTZControl(1);"
                    onmouseup="mouseUpPTZControl();" />
                  <input
                    type="button"
                    class="btn"
                    value="右上"
                    onmousedown="mouseDownPTZControl(7);"
                    onmouseup="mouseUpPTZControl();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="button"
                    class="btn"
                    value="左"
                    onmousedown="mouseDownPTZControl(3);"
                    onmouseup="mouseUpPTZControl();" />
                  <input
                    type="button"
                    class="btn"
                    value="自动"
                    @click="mouseDownPTZControl(9)" />
                  <input
                    type="button"
                    class="btn"
                    value="右"
                    onmousedown="mouseDownPTZControl(4);"
                    onmouseup="mouseUpPTZControl();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="button"
                    class="btn"
                    value="左下"
                    onmousedown="mouseDownPTZControl(6);"
                    onmouseup="mouseUpPTZControl();" />
                  <input
                    type="button"
                    class="btn"
                    value="下"
                    onmousedown="mouseDownPTZControl(2);"
                    onmouseup="mouseUpPTZControl();" />
                  <input
                    type="button"
                    class="btn"
                    value="右下"
                    onmousedown="mouseDownPTZControl(8);"
                    onmouseup="mouseUpPTZControl();" />
                </td>
              </tr>
            </tbody>
          </table>
          <table cellpadding="0" cellspacing="3" border="0" class="left">
            <tbody>
              <tr>
                <td class="tt">云台速度</td>
                <td>
                  <select id="ptzspeed" class="sel">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4" selected>4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">预置点号</td>
                <td>
                  <input id="preset" type="text" class="txt" value="1" />
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input
                    type="button"
                    class="btn2"
                    value="设置预置点"
                    title="设置预置点"
                    @click="clickSetPreset()" />
                  <input
                    type="button"
                    class="btn2"
                    value="调用预置点"
                    title="调用预置点"
                    @click="clickGoPreset()" />
                </td>
              </tr>
            </tbody>
          </table>
          <table cellpadding="0" cellspacing="3" border="0" class="left">
            <tbody>
              <tr>
                <td class="tt">
                  <input
                    type="button"
                    class="btn2"
                    value="变倍+"
                    onmousedown="PTZZoomIn()"
                    onmouseup="PTZZoomStop()" />
                </td>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="变倍-"
                    onmousedown="PTZZoomout()"
                    onmouseup="PTZZoomStop()" />
                </td>
              </tr>
              <tr>
                <td class="tt">
                  <input
                    type="button"
                    class="btn2"
                    value="变焦+"
                    onmousedown="PTZFocusIn()"
                    onmouseup="PTZFoucusStop()" />
                </td>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="变焦-"
                    onmousedown="PTZFoucusOut()"
                    onmouseup="PTZFoucusStop()" />
                </td>
              </tr>
              <tr>
                <td class="tt">
                  <input
                    type="button"
                    class="btn2"
                    value="光圈+"
                    onmousedown="PTZIrisIn()"
                    onmouseup="PTZIrisStop()" />
                </td>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    value="光圈-"
                    onmousedown="PTZIrisOut()"
                    onmouseup="PTZIrisStop()" />
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
        <fieldset class="playback">
          <legend>回放</legend>
          <table width="100%" cellpadding="0" cellspacing="3" border="0">
            <tbody>
              <tr>
                <td class="tt">码流类型</td>
                <td>
                  <select id="record_streamtype" class="sel">
                    <option value="1">主码流</option>
                    <option value="2">子码流</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">开始时间</td>
                <td>
                  <input
                    id="starttime"
                    type="text"
                    class="txt"
                    value="2013-12-10 00:00:00" />（时间格式：2013-11-11
                  12:34:56）
                </td>
              </tr>
              <tr>
                <td class="tt">结束时间</td>
                <td>
                  <input
                    id="endtime"
                    type="text"
                    class="txt"
                    value="2013-12-11 23:59:59" />
                  <input
                    type="button"
                    class="btn"
                    value="搜索"
                    id="recordSearch"
                    @click="clickRecordSearch(0)" />
                </td>
              </tr>
              <tr>
                <td class="tt">按时间下载开始时间</td>
                <td>
                  <input
                    id="downloadstarttime"
                    type="text"
                    class="txt"
                    value="2013-12-10 00:00:00" />（时间格式：2013-11-11
                  12:34:56）
                </td>
              </tr>
              <tr>
                <td class="tt">按时间下载结束时间</td>
                <td>
                  <input
                    id="downloadendtime"
                    type="text"
                    class="txt"
                    value="2013-12-11 23:59:59" />
                  <input
                    type="button"
                    class="btn"
                    value="下载"
                    @click="clickStartDownloadRecordByTime()" />
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div id="searchdiv" class="searchdiv">
                    <table
                      id="searchlist"
                      class="searchlist"
                      cellpadding="0"
                      cellspacing="0"
                      border="0"></table>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input
                    type="button"
                    class="btn2"
                    style="width: 100px"
                    value="开始回放(直连)"
                    @click="clickStartPlayback(false)" />
                  <input
                    type="button"
                    class="btn2"
                    style="width: 100px"
                    value="开始回放(代理)"
                    @click="clickStartPlayback(true)" />
                  <input
                    type="button"
                    class="btn2"
                    value="停止回放"
                    @click="clickStopPlayback()" />
                  <!-- <input id="transstream" type="checkbox" class="vtop" />&nbsp;启用转码码流 -->
                  <input
                    type="button"
                    class="btn2"
                    value="抓图jpg"
                    @click="clickCapturePic('.jpg')" />
                  <input
                    type="button"
                    class="btn2"
                    value="抓图bmp"
                    @click="clickCapturePic('.bmp')" />
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input
                    type="button"
                    class="btn"
                    value="暂停"
                    @click="clickPause()" />
                  <input
                    type="button"
                    class="btn"
                    value="恢复"
                    @click="clickResume()" />
                  <input
                    type="button"
                    class="btn"
                    value="慢放"
                    @click="clickPlaySlow()" />
                  <input
                    type="button"
                    class="btn"
                    value="快放"
                    @click="clickPlayFast()" />
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input
                    type="button"
                    class="btn2"
                    value="开始剪辑"
                    @click="clickStartRecord('playback')" />
                  <input
                    type="button"
                    class="btn2"
                    value="停止剪辑"
                    @click="clickStopRecord('playback')" />
                  <input
                    type="button"
                    class="btn2"
                    value="OSD时间"
                    @click="clickGetOSDTime()" />&nbsp;<input
                    id="osdtime"
                    type="text"
                    class="txt"
                    readonly />
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
        <fieldset class="maintain">
          <legend>系统维护</legend>
          <table width="100%" cellpadding="0" cellspacing="3" border="0">
            <tbody>
              <tr>
                <td>
                  <input
                    type="button"
                    class="btn2"
                    title="简单恢复默认参数"
                    value="简单恢复默认参数"
                    @click="clickRestoreDefault()" />
                  <input
                    type="button"
                    class="btn2"
                    title="完全恢复默认参数"
                    value="完全恢复默认参数"
                    @click="clickRestoreDefaultAll()" />
                  <input
                    type="button"
                    class="btn2"
                    title="重启设备"
                    value="重启设备"
                    @click="Restart()" />
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    id="edfpassword"
                    type="password"
                    class="txt"
                    placeholder="导入导出配置文件前请输入密码" />
                  <input
                    type="button"
                    class="btn2"
                    value="导出配置文件"
                    @click="clickExportDeviceConfig()" />
                </td>
              </tr>
              <tr>
                <td>
                  <input id="configFile" type="text" class="txt" />&nbsp;<input
                    type="button"
                    class="btn"
                    value="浏览"
                    @click="clickOpenFileDlg('configFile', 1)" />&nbsp;<input
                    type="button"
                    class="btn2"
                    value="导入配置文件"
                    @click="clickImportDeviceConfig()" />
                </td>
              </tr>
              <tr>
                <td>
                  <input id="upgradeFile" type="text" class="txt" />&nbsp;<input
                    type="button"
                    class="btn"
                    value="浏览"
                    @click="clickOpenFileDlg('upgradeFile', 1)" />&nbsp;<input
                    type="button"
                    class="btn2"
                    value="升级"
                    @click="clickStartUpgrade()" />
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
      </div>
      <div class="left">
        <fieldset class="operate">
          <legend>操作信息</legend>
          <div id="opinfo" class="opinfo"></div>
        </fieldset>
        <fieldset class="callback">
          <legend>事件回调信息</legend>
          <div id="cbinfo" class="cbinfo"></div>
        </fieldset>
      </div>
    </section>
  </el-drawer>
</template>
<script setup>
  import CardLarge from '@/components/CardLarge.vue';
  import request from '@/utils/request.js';
  import { ErrorCodes, showOPInfo, showCBInfo } from './HkPlayer.js';

  const props = defineProps({
    height: {
      type: [Number, String],
      default: 300,
    },
  });

  const drawerVisible = ref(false);
  const setting = () => {
    drawerVisible.value = true;
  };

  onMounted(() => {
    initWebVideoCtrl();
  });
  onUnmounted(() => {});

  const getData = () => {
    return request({
      method: 'post',
      url: '/DataScreen/database/lulan',
      data: {
        'method': 'getVideoStreamPath',
        'format': 'JSON',
        'content': `{\"id\":1,\"startTime\":null,\"endTime\":null}`,
      },
    });
  };

  // 初始化插件

  // 全局保存当前选中窗口
  var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
  var version = 'websdk3.220191023';
  var FileTemp = null;

  const initWebVideoCtrl = function () {
    // 检查浏览器是否支持无插件
    var iRet = window.WebVideoCtrl.I_SupportNoPlugin();
    if (!iRet) {
      alert('当前浏览器版本过低，不支持无插件，请升级后再试！');
      return;
    }

    // 初始化插件参数及插入无插件
    WebVideoCtrl.I_InitPlugin('100%', '100%', {
      bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
      iPackageType: 2,
      //szColorProperty:"plugin-background:0000ff; sub-background:0000ff; sub-border:00ffff; sub-border-select:0000ff",   //2:PS 11:MP4
      iWndowType: 1,
      bNoPlugin: true,
      cbSelWnd: function (xmlDoc) {
        g_iWndIndex = parseInt($(xmlDoc).find('SelectWnd').eq(0).text(), 10);
        var szInfo = '当前选择的窗口编号：' + g_iWndIndex;
        showCBInfo(szInfo);
      },
      cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
        var szInfo = '当前放大的窗口编号：' + iWndIndex;
        if (!bFullScreen) {
          szInfo = '当前还原的窗口编号：' + iWndIndex;
        }
        showCBInfo(szInfo);
      },
      cbEvent: function (iEventType, iParam1, iParam2) {
        if (2 == iEventType) {
          // 回放正常结束
          showCBInfo('窗口' + iParam1 + '回放结束！');
        } else if (-1 == iEventType) {
          showCBInfo('设备' + iParam1 + '网络错误！');
        } else if (3001 == iEventType) {
          clickStopRecord(g_szRecordType, iParam1);
        }
      },
      cbRemoteConfig: function () {
        showCBInfo('关闭远程配置库！');
      },
      cbInitPluginComplete: function () {
        WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');
      },
      cbPluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
        // 插件错误回调
        showCBInfo('窗口' + iWndIndex + '：' + ErrorCodes[iErrorCode]);
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(iWndIndex),
          szInfo = '';

        if (oWndInfo != null) {
          WebVideoCtrl.I_Stop({
            success: function () {
              szInfo = '停止预览成功！';
              showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
            },
            error: function () {
              szInfo = '停止预览失败！';
              showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
            },
          });
        }
      },
      cbPerformanceLack: function () {
        // 性能不足回调
        showCBInfo('性能不足！');
      },
      cbSecretKeyError: function (iWndIndex) {
        // 码流加密秘钥错误回调
        showCBInfo('窗口' + iWndIndex + '：码流加密秘钥错误！');
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(iWndIndex),
          szInfo = '';

        if (oWndInfo != null) {
          WebVideoCtrl.I_Stop({
            success: function () {
              szInfo = '停止预览成功！';
              showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
            },
            error: function () {
              szInfo = '停止预览失败！';
              showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
            },
          });
        }
      },
    });

    //初始化日期时间
    var szCurTime = dateFormat(new Date(), 'yyyy-MM-dd');
    $('#starttime').val(szCurTime + ' 00:00:00');
    $('#endtime').val(szCurTime + ' 23:59:59');
    $('#downloadstarttime').val(szCurTime + ' 00:00:00');
    $('#downloadendtime').val(szCurTime + ' 23:59:59');

    if (location.protocol === 'https:') {
      $('#port').val('443');
    } else {
      $('#port').val('80');
    }

    const loginip = sessionStorage.getItem('loginip');
    loginip && $('#loginip').val(loginip);

    const password = sessionStorage.getItem('password');
    password && $('#password').val(password);
  };

  // 格式化时间
  function dateFormat(oDate, fmt) {
    var o = {
      'M+': oDate.getMonth() + 1, //月份
      'd+': oDate.getDate(), //日
      'h+': oDate.getHours(), //小时
      'm+': oDate.getMinutes(), //分
      's+': oDate.getSeconds(), //秒
      'q+': Math.floor((oDate.getMonth() + 3) / 3), //季度
      'S': oDate.getMilliseconds(), //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        (oDate.getFullYear() + '').substr(4 - RegExp.$1.length)
      );
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length == 1
            ? o[k]
            : ('00' + o[k]).substr(('' + o[k]).length)
        );
      }
    }
    return fmt;
  }

  // 获取窗口尺寸
  const getWindowSize = () => {
    var nWidth = $(this).width() + $(this).scrollLeft(),
      nHeight = $(this).height() + $(this).scrollTop();

    return { width: nWidth, height: nHeight };
  };

  // 打开选择框 0：文件夹  1：文件
  function clickOpenFileDlg(id, iType) {
    WebVideoCtrl.I2_OpenFileDlg(iType).then(function ({ szFileName, file }) {
      if (szFileName != -1 && szFileName != '' && szFileName != null) {
        $('#' + id).val(szFileName);
        FileTemp = file;
      }
    });
  }

  // 获取本地参数
  function clickGetLocalCfg() {
    var xmlDoc = WebVideoCtrl.I_GetLocalCfg();

    if (xmlDoc != null) {
      $('#netsPreach').val($(xmlDoc).find('BuffNumberType').eq(0).text());
      $('#wndSize').val($(xmlDoc).find('PlayWndType').eq(0).text());
      $('#rulesInfo').val($(xmlDoc).find('IVSMode').eq(0).text());
      $('#captureFileFormat').val(
        $(xmlDoc).find('CaptureFileFormat').eq(0).text()
      );
      $('#packSize').val($(xmlDoc).find('PackgeSize').eq(0).text());
      $('#recordPath').val($(xmlDoc).find('RecordPath').eq(0).text());
      $('#downloadPath').val($(xmlDoc).find('DownloadPath').eq(0).text());
      $('#previewPicPath').val($(xmlDoc).find('CapturePath').eq(0).text());
      $('#playbackPicPath').val($(xmlDoc).find('PlaybackPicPath').eq(0).text());
      $('#devicePicPath').val($(xmlDoc).find('DeviceCapturePath').eq(0).text());
      $('#playbackFilePath').val(
        $(xmlDoc).find('PlaybackFilePath').eq(0).text()
      );
      $('#protocolType').val($(xmlDoc).find('ProtocolType').eq(0).text());

      showOPInfo('本地配置获取成功！');
    } else {
      showOPInfo('本地配置获取失败！');
    }
  }

  // 设置本地参数
  function clickSetLocalCfg() {
    var arrXml = [],
      szInfo = '';

    arrXml.push('<LocalConfigInfo>');
    arrXml.push('<PackgeSize>' + $('#packSize').val() + '</PackgeSize>');
    arrXml.push('<PlayWndType>' + $('#wndSize').val() + '</PlayWndType>');
    arrXml.push(
      '<BuffNumberType>' + $('#netsPreach').val() + '</BuffNumberType>'
    );
    arrXml.push('<RecordPath>' + $('#recordPath').val() + '</RecordPath>');
    arrXml.push(
      '<CapturePath>' + $('#previewPicPath').val() + '</CapturePath>'
    );
    arrXml.push(
      '<PlaybackFilePath>' +
        $('#playbackFilePath').val() +
        '</PlaybackFilePath>'
    );
    arrXml.push(
      '<PlaybackPicPath>' + $('#playbackPicPath').val() + '</PlaybackPicPath>'
    );
    arrXml.push(
      '<DeviceCapturePath>' + $('#devicePicPath').val() + '</DeviceCapturePath>'
    );
    arrXml.push(
      '<DownloadPath>' + $('#downloadPath').val() + '</DownloadPath>'
    );
    arrXml.push('<IVSMode>' + $('#rulesInfo').val() + '</IVSMode>');
    arrXml.push(
      '<CaptureFileFormat>' +
        $('#captureFileFormat').val() +
        '</CaptureFileFormat>'
    );
    arrXml.push(
      '<ProtocolType>' + $('#protocolType').val() + '</ProtocolType>'
    );
    arrXml.push('</LocalConfigInfo>');

    var iRet = WebVideoCtrl.I_SetLocalCfg(arrXml.join(''));

    if (0 == iRet) {
      szInfo = '本地配置设置成功！';
    } else {
      szInfo = '本地配置设置失败！';
    }
    showOPInfo(szInfo);
  }

  // 窗口分割数
  function changeWndNum(e) {
    const iType = parseInt(e.target.value, 10);
    WebVideoCtrl.I_ChangeWndNum(iType);
  }

  // 登录
  function clickLogin(iProtocol) {
    var szIP = $('#loginip').val(),
      szPort = $('#port').val(),
      szUsername = $('#username').val(),
      szPassword = $('#password').val();

    if ('' == szIP || '' == szPort) {
      return;
    }

    sessionStorage.setItem('loginip', szIP); // 记录下。方便查看
    sessionStorage.setItem('password', szPassword);

    var szDeviceIdentify = szIP + '_' + szPort;

    var iRet = WebVideoCtrl.I_Login(
      szIP,
      iProtocol,
      szPort,
      szUsername,
      szPassword,
      {
        success: function (xmlDoc) {
          showOPInfo(szDeviceIdentify + ' 登录成功！');
          $('#ip').prepend(
            "<option value='" +
              szDeviceIdentify +
              "'>" +
              szDeviceIdentify +
              '</option>'
          );
          setTimeout(function () {
            $('#ip').val(szDeviceIdentify);
            getChannelInfo();
            getDevicePort();
          }, 10);
        },
        error: function (status, xmlDoc) {
          showOPInfo(szDeviceIdentify + ' 登录失败！', status, xmlDoc);
        },
      }
    );

    if (-1 == iRet) {
      showOPInfo(szDeviceIdentify + ' 已登录过！');
    }
  }

  // 退出
  function clickLogout() {
    var szDeviceIdentify = $('#ip').val(),
      szInfo = '';

    if (null == szDeviceIdentify) {
      return;
    }
    let WndSet = WebVideoCtrl.I_GetWndSet();
    var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
    if (0 == iRet) {
      WndSet.forEach((element) => {
        if (element.szDeviceIdentify === szDeviceIdentify) {
          WebVideoCtrl.I_Stop({
            iIndex: element.iIndex,
            success: function () {
              szInfo = '停止取流成功！';
              showOPInfo(szDeviceIdentify + ' ' + szInfo);
            },
            error: function () {
              szInfo = '停止取流失败！';
              showOPInfo(szDeviceIdentify + ' ' + szInfo);
            },
          });
          WebVideoCtrl.I_SetSecretKey('', element.iIndex); // 清空码流秘钥
        }
      });
      szInfo = '退出成功！';

      $("#ip option[value='" + szDeviceIdentify + "']").remove();
      getChannelInfo();
      getDevicePort();
    } else {
      szInfo = '退出失败！';
    }
    showOPInfo(szDeviceIdentify + ' ' + szInfo);
  }

  // 获取设备信息
  function clickGetDeviceInfo() {
    var szDeviceIdentify = $('#ip').val();

    if (null == szDeviceIdentify) {
      return;
    }

    WebVideoCtrl.I_GetDeviceInfo(szDeviceIdentify, {
      success: function (xmlDoc) {
        var arrStr = [];
        arrStr.push(
          '设备名称：' + $(xmlDoc).find('deviceName').eq(0).text() + '\r\n'
        );
        arrStr.push(
          '设备ID：' + $(xmlDoc).find('deviceID').eq(0).text() + '\r\n'
        );
        arrStr.push('型号：' + $(xmlDoc).find('model').eq(0).text() + '\r\n');
        arrStr.push(
          '设备序列号：' + $(xmlDoc).find('serialNumber').eq(0).text() + '\r\n'
        );
        arrStr.push(
          'MAC地址：' + $(xmlDoc).find('macAddress').eq(0).text() + '\r\n'
        );
        arrStr.push(
          '主控版本：' +
            $(xmlDoc).find('firmwareVersion').eq(0).text() +
            ' ' +
            $(xmlDoc).find('firmwareReleasedDate').eq(0).text() +
            '\r\n'
        );
        arrStr.push(
          '编码版本：' +
            $(xmlDoc).find('encoderVersion').eq(0).text() +
            ' ' +
            $(xmlDoc).find('encoderReleasedDate').eq(0).text() +
            '\r\n'
        );

        showOPInfo(szDeviceIdentify + ' 获取设备信息成功！');
        alert(arrStr.join(''));
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 获取设备信息失败！', status, xmlDoc);
      },
    });
  }

  // 获取通道
  function getChannelInfo() {
    var szDeviceIdentify = $('#ip').val(),
      oSel = $('#channels').empty();

    if (null == szDeviceIdentify) {
      return;
    }

    // 模拟通道
    WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find('VideoInputChannel');

        $.each(oChannels, function (i) {
          var id = $(this).find('id').eq(0).text(),
            name = $(this).find('name').eq(0).text();
          if ('' == name) {
            name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1);
          }
          oSel.append(
            "<option value='" + id + "' bZero='false'>" + name + '</option>'
          );
        });
        showOPInfo(szDeviceIdentify + ' 获取模拟通道成功！');
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 获取模拟通道失败！', status, xmlDoc);
      },
    });
    // 数字通道
    WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find('InputProxyChannelStatus');

        $.each(oChannels, function (i) {
          var id = $(this).find('id').eq(0).text(),
            name = $(this).find('name').eq(0).text(),
            online = $(this).find('online').eq(0).text();
          if ('false' == online) {
            // 过滤禁用的数字通道
            return true;
          }
          if ('' == name) {
            name = 'IPCamera ' + (i < 9 ? '0' + (i + 1) : i + 1);
          }
          oSel.append(
            "<option value='" + id + "' bZero='false'>" + name + '</option>'
          );
        });
        showOPInfo(szDeviceIdentify + ' 获取数字通道成功！');
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 获取数字通道失败！', status, xmlDoc);
      },
    });
    // 零通道
    WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find('ZeroVideoChannel');

        $.each(oChannels, function (i) {
          var id = $(this).find('id').eq(0).text(),
            name = $(this).find('name').eq(0).text();
          if ('' == name) {
            name = 'Zero Channel ' + (i < 9 ? '0' + (i + 1) : i + 1);
          }
          if ('true' == $(this).find('enabled').eq(0).text()) {
            // 过滤禁用的零通道
            oSel.append(
              "<option value='" + id + "' bZero='true'>" + name + '</option>'
            );
          }
        });
        showOPInfo(szDeviceIdentify + ' 获取零通道成功！');
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 获取零通道失败！', status, xmlDoc);
      },
    });
  }

  // 获取端口
  function getDevicePort() {
    var szDeviceIdentify = $('#ip').val();

    if (null == szDeviceIdentify) {
      return;
    }

    var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
    if (oPort != null) {
      $('#deviceport').val(oPort.iDevicePort);
      $('#rtspport').val(oPort.iRtspPort);

      showOPInfo(szDeviceIdentify + ' 获取端口成功！');
    } else {
      showOPInfo(szDeviceIdentify + ' 获取端口失败！');
    }
  }

  // 获取数字通道
  function clickGetDigitalChannelInfo() {
    var szDeviceIdentify = $('#ip').val(),
      iAnalogChannelNum = 0;

    $('#digitalchannellist').empty();

    if (null == szDeviceIdentify) {
      return;
    }

    // 数字通道
    WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find('InputProxyChannelStatus');

        $.each(oChannels, function () {
          var id = parseInt($(this).find('id').eq(0).text(), 10),
            ipAddress = $(this).find('ipAddress').eq(0).text(),
            srcInputPort = $(this).find('srcInputPort').eq(0).text(),
            managePortNo = $(this).find('managePortNo').eq(0).text(),
            online = $(this).find('online').eq(0).text(),
            proxyProtocol = $(this).find('proxyProtocol').eq(0).text();

          var objTr = $('#digitalchannellist').get(0).insertRow(-1);
          var objTd = objTr.insertCell(0);
          objTd.innerHTML =
            id - iAnalogChannelNum < 10
              ? 'D0' + (id - iAnalogChannelNum)
              : 'D' + (id - iAnalogChannelNum);
          objTd = objTr.insertCell(1);
          objTd.width = '25%';
          objTd.innerHTML = ipAddress;
          objTd = objTr.insertCell(2);
          objTd.width = '15%';
          objTd.innerHTML = srcInputPort;
          objTd = objTr.insertCell(3);
          objTd.width = '20%';
          objTd.innerHTML = managePortNo;
          objTd = objTr.insertCell(4);
          objTd.width = '15%';
          objTd.innerHTML = 'true' == online ? '在线' : '离线';
          objTd = objTr.insertCell(5);
          objTd.width = '25%';
          objTd.innerHTML = proxyProtocol;
        });
        showOPInfo(szDeviceIdentify + ' 获取数字通道成功！');
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 没有数字通道！', status, xmlDoc);
      },
    });
  }
  // 设置码流加密秘钥
  function setSecretKey() {
    let szSecretKey = $('#szSecretKey').val();
    WebVideoCtrl.I_SetSecretKey(szSecretKey, g_iWndIndex)
      .then(() => {
        showOPInfo('已设置秘钥！');
      })
      .catch(() => {
        showOPInfo('秘钥设置失败！');
      });
  }
  // 开始预览
  function clickStartRealPlay(bProxy) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szDeviceIdentify = $('#ip').val(),
      iRtspPort = parseInt($('#rtspport').val(), 10),
      iChannelID = parseInt($('#channels').val(), 10),
      bZeroChannel =
        $('#channels option')
          .eq($('#channels').get(0).selectedIndex)
          .attr('bZero') == 'true'
          ? true
          : false,
      szInfo = '',
      iStreamType = parseInt($('#streamtype').val(), 10);

    if (null == szDeviceIdentify) {
      return;
    }
    var startRealPlay = function () {
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iRtspPort: iRtspPort,
        iStreamType: iStreamType,
        iChannelID: iChannelID,
        bZeroChannel: bZeroChannel,
        bProxy, // ws取流协议是否要过Nginx
        success: function () {
          szInfo = '开始预览成功！';
          showOPInfo(szDeviceIdentify + ' ' + szInfo);
        },
        error: function (status, xmlDoc) {
          if (403 === status) {
            szInfo = '设备不支持Websocket取流！';
          } else {
            szInfo = '开始预览失败！';
          }
          showOPInfo(szDeviceIdentify + ' ' + szInfo);
        },
      });
    };

    if (oWndInfo != null) {
      // 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startRealPlay();
        },
      });
    } else {
      startRealPlay();
    }
  }
  function setTextOverlay() {
    var szDeviceIdentify = $('#ip').val();
    var szInfo = '';
    var that = this;
    var iChannelID = parseInt($('#channels').val(), 10);
    var szUrl =
      'ISAPI/System/Video/inputs/channels/' + iChannelID + '/overlays';
    WebVideoCtrl.I_GetTextOverlay(szUrl, szDeviceIdentify, {
      success: function (data) {
        var xmldoc = toXMLStr(data);
        const insertContent = `<TextOverlay><id>1</id><enabled>true</enabled><alignment>customize</alignment><positionX>0</positionX><positionY>576</positionY><displayText>这是OSD叠加信息</displayText></TextOverlay>`;
        xmldoc.split('</TextOverlayList');
        xmldoc = xmldoc.replace(
          '</TextOverlayList>',
          `${insertContent}</TextOverlayList>`
        );
        var newOptions = {
          async: true,
          type: 'PUT',
          data: xmldoc,
          success: function () {
            szInfo = '绘制osd信息成功';
            showOPInfo(szDeviceIdentify + ' ' + szInfo);
          },
          error: function () {
            szInfo = '绘制osd信息失败';
            showOPInfo(szDeviceIdentify + ' ' + szInfo);
          },
        };

        WebVideoCtrl.I_SendHTTPRequest(szDeviceIdentify, szUrl, newOptions);
      },
      error: function () {
        szInfo = '设备不支持此功能！';
        showOPInfo(szDeviceIdentify + ' ' + szInfo);
      },
    });
  }
  // 停止预览
  function clickStopRealPlay() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_Stop({
        success: function () {
          szInfo = '停止预览成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          szInfo = '停止预览失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // 打开声音
  function clickOpenSound() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_OpenSound()
        .then(() => {
          szInfo = '打开声音成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        })
        .catch((e) => {
          szInfo = '打开声音失败！';
          if (e === 1023) {
            szInfo = '声音已是打开状态！';
          }
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        });
    }
  }

  // 关闭声音
  function clickCloseSound() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_CloseSound()
        .then(() => {
          szInfo = '关闭声音成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        })
        .catch((e) => {
          szInfo = '关闭声音失败！';
          if (e === 1023) {
            szInfo = '声音已是关闭状态！';
          }
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        });
    }
  }

  // 设置音量
  function clickSetVolume() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iVolume = parseInt($('#volume').val(), 10),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_SetVolume(iVolume)
        .then(() => {
          szInfo = '音量设置成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        })
        .catch(() => {
          szInfo = '音量设置失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        });
    }
  }

  // 抓图
  function clickCapturePic(type) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      var szChannelID = $('#channels').val();
      var szPicName =
        oWndInfo.szDeviceIdentify +
        '_' +
        szChannelID +
        '_' +
        new Date().getTime();

      szPicName += type;

      WebVideoCtrl.I2_CapturePic(szPicName, {}).then(
        function () {
          szInfo = '抓图成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        function () {
          szInfo = '抓图失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        }
      );
    }
  }

  function uint8ArrayToBase64(uint8Array) {
    return new Promise((resolve) => {
      const blob = new Blob([uint8Array]);
      const reader = new FileReader();
      reader.onload = () => {
        const dataUrl = reader.result;
        const base64 = dataUrl.split(',')[1];
        resolve(base64);
      };
      reader.readAsDataURL(blob);
    });
  }

  // 抓图数据
  function clickCapturePicData() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      var szChannelID = $('#channels').val();
      var szPicName =
        oWndInfo.szDeviceIdentify +
        '_' +
        szChannelID +
        '_' +
        new Date().getTime();

      szPicName += '.jpg';

      WebVideoCtrl.I2_CapturePic(szPicName, {
        cbCallback: (uint8Array) => {
          uint8ArrayToBase64(uint8Array).then((base64String) => {
            console.log('抓图数据打印:', base64String);
          });
        },
      }).then(
        function () {
          szInfo = '抓图数据打印成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        function () {
          szInfo = '抓图数据打印失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        }
      );
    }
  }

  // 开始录像
  var g_szRecordType = '';
  function clickStartRecord(szType) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    g_szRecordType = szType;

    if (oWndInfo != null) {
      var szChannelID = $('#channels').val(),
        szFileName =
          oWndInfo.szDeviceIdentify +
          '_' +
          szChannelID +
          '_' +
          new Date().getTime();

      WebVideoCtrl.I_StartRecord(szFileName, {
        bDateDir: true, //是否生成日期文件
        success: function () {
          if ('realplay' === szType) {
            szInfo = '开始录像成功！';
          } else if ('playback' === szType) {
            szInfo = '开始剪辑成功！';
          }
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          if ('realplay' === szType) {
            szInfo = '开始录像失败！';
          } else if ('playback' === szType) {
            szInfo = '开始剪辑失败！';
          }
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // 停止录像
  function clickStopRecord(szType, iWndIndex) {
    if ('undefined' === typeof iWndIndex) {
      iWndIndex = g_iWndIndex;
    }
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_StopRecord({
        success: function () {
          if ('realplay' === szType) {
            szInfo = '停止录像成功！';
          } else if ('playback' === szType) {
            szInfo = '停止剪辑成功！';
          }
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          if ('realplay' === szType) {
            szInfo = '停止录像失败！';
          } else if ('playback' === szType) {
            szInfo = '停止剪辑失败！';
          }
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // 获取对讲通道
  function clickGetAudioInfo() {
    var szDeviceIdentify = $('#ip').val();

    if (null == szDeviceIdentify) {
      return;
    }

    WebVideoCtrl.I_GetAudioInfo(szDeviceIdentify, {
      success: function (xmlDoc) {
        var oAudioChannels = $(xmlDoc).find('TwoWayAudioChannel'),
          oSel = $('#audiochannels').empty();
        $.each(oAudioChannels, function () {
          var id = $(this).find('id').eq(0).text();

          oSel.append("<option value='" + id + "'>" + id + '</option>');
        });
        showOPInfo(szDeviceIdentify + ' 获取对讲通道成功！');
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 获取对讲通道失败！', status, xmlDoc);
      },
    });
  }

  // 启用电子放大
  function clickEnableEZoom() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_EnableEZoom()
        .then((e) => {
          szInfo = '启用电子放大成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        })
        .catch((e) => {
          szInfo = '启用电子放大失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        });
    }
  }

  // 禁用电子放大
  function clickDisableEZoom() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_DisableEZoom()
        .then((e) => {
          szInfo = '禁用电子放大成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        })
        .catch((e) => {
          szInfo = '禁用电子放大失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        });
    }
  }

  // 启用3D放大
  function clickEnable3DZoom() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      const fCallback = (e) => {
        console.log('回调矩形信息:', e);
      };
      WebVideoCtrl.I_Enable3DZoom(g_iWndIndex, fCallback)
        .then(() => {
          szInfo = '启用3D放大成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        })
        .catch((e) => {
          console.log(e);

          szInfo = '启用3D放大失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        });
    }
  }

  // 禁用3D放大
  function clickDisable3DZoom() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      var iRet = WebVideoCtrl.I_Disable3DZoom();
      if (0 == iRet) {
        szInfo = '禁用3D放大成功！';
      } else {
        szInfo = '禁用3D放大失败！';
      }
      showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
    }
  }

  // 全屏
  function clickFullScreen() {
    WebVideoCtrl.I_FullScreen(true);
  }

  // PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZ
  var g_bPTZAuto = false;
  function mouseDownPTZControl(iPTZIndex) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      bZeroChannel =
        $('#channels option')
          .eq($('#channels').get(0).selectedIndex)
          .attr('bZero') == 'true'
          ? true
          : false,
      iPTZSpeed = $('#ptzspeed').val();

    if (bZeroChannel) {
      // 零通道不支持云台
      return;
    }

    if (oWndInfo != null) {
      if (9 == iPTZIndex && g_bPTZAuto) {
        iPTZSpeed = 0; // 自动开启后，速度置为0可以关闭自动
      } else {
        g_bPTZAuto = false; // 点击其他方向，自动肯定会被关闭
      }

      WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
        iPTZSpeed: iPTZSpeed,
        success: function (xmlDoc) {
          if (9 == iPTZIndex && g_bPTZAuto) {
            showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台成功！');
          } else {
            showOPInfo(oWndInfo.szDeviceIdentify + ' 开启云台成功！');
          }
          if (9 == iPTZIndex) {
            g_bPTZAuto = !g_bPTZAuto;
          }
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + ' 开启云台失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  // 方向PTZ停止
  function mouseUpPTZControl() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(1, true, {
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + ' 停止云台失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  // 设置预置点
  function clickSetPreset() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iPresetID = parseInt($('#preset').val(), 10);

    if (oWndInfo != null) {
      WebVideoCtrl.I_SetPreset(iPresetID, {
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 设置预置点成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + ' 设置预置点失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  // 调用预置点
  function clickGoPreset() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iPresetID = parseInt($('#preset').val(), 10);

    if (oWndInfo != null) {
      WebVideoCtrl.I_GoPreset(iPresetID, {
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调用预置点成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + ' 调用预置点失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  // 搜索录像
  var g_iSearchTimes = 0;
  function clickRecordSearch(iType) {
    var szDeviceIdentify = $('#ip').val(),
      iChannelID = parseInt($('#channels').val(), 10),
      bZeroChannel =
        $('#channels option')
          .eq($('#channels').get(0).selectedIndex)
          .attr('bZero') == 'true'
          ? true
          : false,
      iStreamType = parseInt($('#record_streamtype').val(), 10),
      szStartTime = $('#starttime').val(),
      szEndTime = $('#endtime').val();
    if (
      Date.parse(szEndTime.replace(/-/g, '/')) -
        Date.parse(szStartTime.replace(/-/g, '/')) <
      0
    ) {
      alert('开始时间大于结束时间');
      return;
    }
    if (null == szDeviceIdentify) {
      return;
    }

    if (bZeroChannel) {
      // 零通道不支持录像搜索
      return;
    }

    if (0 == iType) {
      // 首次搜索
      $('#searchlist').empty();
      g_iSearchTimes = 0;
    }

    // 禁用按钮
    $('#recordSearch').prop('disabled', true);

    WebVideoCtrl.I_RecordSearch(
      szDeviceIdentify,
      iChannelID,
      szStartTime,
      szEndTime,
      {
        iStreamType: iStreamType,
        iSearchPos: g_iSearchTimes * 40,
        success: function (xmlDoc) {
          if ('MORE' === $(xmlDoc).find('responseStatusStrg').eq(0).text()) {
            for (
              var i = 0, nLen = $(xmlDoc).find('searchMatchItem').length;
              i < nLen;
              i++
            ) {
              var szPlaybackURI = $(xmlDoc).find('playbackURI').eq(i).text();
              if (szPlaybackURI.indexOf('name=') < 0) {
                break;
              }
              var szStartTime = $(xmlDoc).find('startTime').eq(i).text();
              var szEndTime = $(xmlDoc).find('endTime').eq(i).text();
              var szFileName = szPlaybackURI.substring(
                szPlaybackURI.indexOf('name=') + 5,
                szPlaybackURI.indexOf('&size=')
              );

              var objTr = $('#searchlist').get(0).insertRow(-1);
              var objTd = objTr.insertCell(0);
              objTd.id = 'downloadTd' + i;
              objTd.innerHTML = g_iSearchTimes * 40 + (i + 1);
              objTd = objTr.insertCell(1);
              objTd.width = '30%';
              objTd.innerHTML = szFileName;
              objTd = objTr.insertCell(2);
              objTd.width = '30%';
              objTd.innerHTML = szStartTime.replace('T', ' ').replace('Z', '');
              objTd = objTr.insertCell(3);
              objTd.width = '30%';
              objTd.innerHTML = szEndTime.replace('T', ' ').replace('Z', '');
              objTd = objTr.insertCell(4);
              objTd.width = '10%';
              objTd.innerHTML =
                "<a href='javascript:;' id=" +
                szFileName +
                " onclick='clickStartDownloadRecord(" +
                (i + g_iSearchTimes * 40) +
                ");'>下载</a>";
              $('#downloadTd' + (i + g_iSearchTimes * 40)).data(
                'fileName',
                szFileName
              );
              $('#downloadTd' + (i + g_iSearchTimes * 40)).data(
                'playbackURI',
                szPlaybackURI
              );
            }

            g_iSearchTimes++;
            clickRecordSearch(1); // 继续搜索
          } else if (
            'OK' === $(xmlDoc).find('responseStatusStrg').eq(0).text()
          ) {
            var iLength = $(xmlDoc).find('searchMatchItem').length;
            for (var i = 0; i < iLength; i++) {
              var szPlaybackURI = $(xmlDoc).find('playbackURI').eq(i).text();
              if (szPlaybackURI.indexOf('name=') < 0) {
                break;
              }
              var szStartTime = $(xmlDoc).find('startTime').eq(i).text();
              var szEndTime = $(xmlDoc).find('endTime').eq(i).text();
              var szFileName = szPlaybackURI.substring(
                szPlaybackURI.indexOf('name=') + 5,
                szPlaybackURI.indexOf('&size=')
              );

              var objTr = $('#searchlist').get(0).insertRow(-1);
              var objTd = objTr.insertCell(0);
              objTd.id = 'downloadTd' + i;
              objTd.innerHTML = g_iSearchTimes * 40 + (i + 1);
              objTd = objTr.insertCell(1);
              objTd.width = '30%';
              objTd.innerHTML = szFileName;
              objTd = objTr.insertCell(2);
              objTd.width = '30%';
              objTd.innerHTML = szStartTime.replace('T', ' ').replace('Z', '');
              objTd = objTr.insertCell(3);
              objTd.width = '30%';
              objTd.innerHTML = szEndTime.replace('T', ' ').replace('Z', '');
              objTd = objTr.insertCell(4);
              objTd.width = '10%';
              objTd.innerHTML =
                "<a href='javascript:;' onclick='clickStartDownloadRecord(" +
                (i + g_iSearchTimes * 40) +
                ");'>下载</a>";
              $('#downloadTd' + (i + g_iSearchTimes * 40)).data(
                'fileName',
                szFileName
              );
              $('#downloadTd' + (i + g_iSearchTimes * 40)).data(
                'playbackURI',
                szPlaybackURI
              );
            }
            showOPInfo(szDeviceIdentify + ' 搜索录像文件成功！');
          } else if (
            'NO MATCHES' === $(xmlDoc).find('responseStatusStrg').eq(0).text()
          ) {
            setTimeout(function () {
              showOPInfo(szDeviceIdentify + ' 没有录像文件！');
            }, 50);
          }
          // 恢复按钮（取消禁用）
          $('#recordSearch').prop('disabled', false);
        },
        error: function (status, xmlDoc) {
          // 恢复按钮（取消禁用）
          $('#recordSearch').prop('disabled', false);
          showOPInfo(szDeviceIdentify + ' 搜索录像文件失败！', status, xmlDoc);
        },
      }
    );
  }

  // 开始回放
  function clickStartPlayback(bProxy) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szDeviceIdentify = $('#ip').val(),
      iRtspPort = parseInt($('#rtspport').val(), 10),
      iStreamType = parseInt($('#record_streamtype').val(), 10),
      bZeroChannel =
        $('#channels option')
          .eq($('#channels').get(0).selectedIndex)
          .attr('bZero') == 'true'
          ? true
          : false,
      iChannelID = parseInt($('#channels').val(), 10),
      szStartTime = $('#starttime').val(),
      szEndTime = $('#endtime').val(),
      szInfo = '',
      // bChecked = $("#transstream").prop("checked"),
      iRet = -1;

    if (null == szDeviceIdentify) {
      return;
    }

    if (bZeroChannel) {
      // 零通道不支持回放
      return;
    }

    var startPlayback = function () {
      WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
        iRtspPort: iRtspPort,
        iStreamType: iStreamType,
        iChannelID: iChannelID,
        szStartTime: szStartTime,
        szEndTime: szEndTime,
        bProxy, //ws取流协议是否要过Nginx
        success: function () {
          szInfo = '开始回放成功！';
          showOPInfo(szDeviceIdentify + ' ' + szInfo);
        },
        error: function (status, xmlDoc) {
          if (403 === status) {
            szInfo = '设备不支持Websocket取流！';
          } else {
            szInfo = '开始回放失败！';
          }
          showOPInfo(szDeviceIdentify + ' ' + szInfo);
        },
      });
    };

    if (oWndInfo != null) {
      // 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startPlayback();
        },
      });
    } else {
      startPlayback();
    }
  }

  // 停止回放
  function clickStopPlayback() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_Stop({
        success: function () {
          szInfo = '停止回放成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          szInfo = '停止回放失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // 停止预览全部
  function clickStopAllRealPlay() {
    WebVideoCtrl.I_StopAll()
      .then(() => {
        showOPInfo('停止预览全部成功!');
      })
      .catch(() => {
        showOPInfo('停止预览全部失败!');
      });
  }

  // 暂停
  function clickPause() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_Pause({
        success: function () {
          szInfo = '暂停成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          szInfo = '暂停失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // 恢复
  function clickResume() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_Resume({
        success: function () {
          szInfo = '恢复成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          szInfo = '恢复失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // 慢放
  function clickPlaySlow() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_PlaySlow({
        success: function () {
          szInfo = '慢放成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          szInfo = '慢放失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // 快放
  function clickPlayFast() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = '';

    if (oWndInfo != null) {
      WebVideoCtrl.I_PlayFast({
        success: function () {
          szInfo = '快放成功！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
        error: function () {
          szInfo = '快放失败！';
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo);
        },
      });
    }
  }

  // OSD时间
  function clickGetOSDTime() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      var szTime = WebVideoCtrl.I_GetOSDTime({
        success: function (szOSDTime) {
          $('#osdtime').val(szOSDTime);
          showOPInfo(oWndInfo.szDeviceIdentify + ' 获取OSD时间成功！');
        },
        error: function () {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 获取OSD时间失败！');
        },
      });
    }
  }

  // 下载录像
  var g_iDownloadID = -1;
  var g_tDownloadProcess = 0;
  function clickStartDownloadRecord(i) {
    var szDeviceIdentify = $('#ip').val(),
      szChannelID = $('#channels').val(),
      szFileName = $('#downloadTd' + i).data('fileName'),
      szPlaybackURI = $('#downloadTd' + i).data('playbackURI');

    if (null == szDeviceIdentify) {
      return;
    }
    showOPInfo(
      szDeviceIdentify +
        ' 开始下载！录像文件大，请耐心等待。完成后到浏览器下载内容页面查看'
    );

    WebVideoCtrl.I_StartDownloadRecord(
      szDeviceIdentify,
      szPlaybackURI,
      szDeviceIdentify + '_' + szChannelID + '_' + szFileName,
      {
        bDateDir: true, //是否生成日期文件
      }
    )
      .then(() => {
        showOPInfo(szDeviceIdentify + ' 下载成功！');
      })
      .catch(() => {
        showOPInfo(szDeviceIdentify + ' 下载失败！');
      });
  }
  function clickStartDownloadRecordByTime() {
    var szDeviceIdentify = $('#ip').val(),
      szChannelID = $('#channels').val(),
      szFileName = $('#downloadTd0').data('fileName'),
      szPlaybackURI = $('#downloadTd0').data('playbackURI'),
      szStartTime = $('#downloadstarttime').val(),
      szEndTime = $('#downloadendtime').val();
    if (null == szDeviceIdentify) {
      return;
    }
    if (
      Date.parse(szEndTime.replace(/-/g, '/')) -
        Date.parse(szStartTime.replace(/-/g, '/')) <
      0
    ) {
      alert('开始时间大于结束时间');
      return;
    }
    showOPInfo(
      szDeviceIdentify +
        ' 开始下载！录像文件大，请耐心等待。完成后到浏览器下载内容页面查看'
    );
    WebVideoCtrl.I_StartDownloadRecordByTime(
      szDeviceIdentify,
      szPlaybackURI,
      szDeviceIdentify + '_' + szChannelID + '_' + szFileName,
      szStartTime,
      szEndTime,
      {
        bDateDir: true, //是否生成日期文件
      }
    )
      .then(() => {
        showOPInfo(szDeviceIdentify + ' 下载成功！');
      })
      .catch(() => {
        showOPInfo(szDeviceIdentify + ' 下载失败！');
      });
  }

  // 导出配置文件
  function clickExportDeviceConfig() {
    var szDeviceIdentify = $('#ip').val(),
      szInfo = '';

    if (null == szDeviceIdentify) {
      return;
    }
    var szDevicePassWord = $('#edfpassword').val();

    WebVideoCtrl.I_ExportDeviceConfig(szDeviceIdentify, szDevicePassWord)
      .then(() => {
        szInfo = '导出配置文件成功！';
        showOPInfo(szDeviceIdentify + ' ' + szInfo);
      })
      .catch(() => {
        szInfo = '导出配置文件失败！';
        showOPInfo(szDeviceIdentify + ' ' + szInfo);
      });
  }

  function Restart() {
    var szDeviceIdentify = $('#ip').val();
    WebVideoCtrl.I_Restart(szDeviceIdentify, {
      success: function (xmlDoc) {
        $("<div id='restartDiv' class='freeze'>重启中...</div>").appendTo(
          'body'
        );
        var oSize = getWindowSize();
        $('#restartDiv').css({
          width: oSize.width + 'px',
          height: oSize.height + 'px',
          lineHeight: oSize.height + 'px',
          left: 0,
          top: 0,
        });
        setTimeout("reconnect('" + szDeviceIdentify + "')", 20000);
      },
      error: function (status, xmlDoc) {
        $('#restartDiv').remove();
        showOPInfo(szDeviceIdentify + ' 重启失败！', status, xmlDoc);
      },
    });
  }

  // 导入配置文件
  const clickImportDeviceConfig = () => {
    var szDeviceIdentify = $('#ip').val(),
      szFileName = $('#configFile').val(),
      szDevicePassWord = $('#edfpassword').val();
    if (null == szDeviceIdentify) {
      return;
    }

    if ('' == szFileName) {
      alert('请选择配置文件！');
      return;
    }
    showOPInfo(szDeviceIdentify + ' 开始导入，请不要进行其他操作！');

    WebVideoCtrl.I_ImportDeviceConfig(
      szDeviceIdentify,
      szFileName,
      szDevicePassWord,
      FileTemp
    )
      .then(() => {
        WebVideoCtrl.I_Restart(szDeviceIdentify, {
          success: function (xmlDoc) {
            $('#restartDiv').remove();
            $("<div id='restartDiv' class='freeze'>重启中...</div>").appendTo(
              'body'
            );
            var oSize = getWindowSize();
            $('#restartDiv').css({
              width: oSize.width + 'px',
              height: oSize.height + 'px',
              lineHeight: oSize.height + 'px',
              left: 0,
              top: 0,
            });
            setTimeout("reconnect('" + szDeviceIdentify + "')", 20000);
          },
          error: function (status, xmlDoc) {
            showOPInfo(szDeviceIdentify + ' 重启失败！', status, xmlDoc);
          },
        });
      })
      .catch(() => {
        $('#restartDiv').remove();
        showOPInfo(szDeviceIdentify + ' 导入失败！');
      });
  };

  // 重连
  function reconnect(szDeviceIdentify) {
    WebVideoCtrl.I_Reconnect(szDeviceIdentify, {
      success: function (xmlDoc) {
        $('#restartDiv').remove();
        location.reload();
      },
      error: function (status, xmlDoc) {
        if (401 == status) {
          // 无插件方案，重启后session已失效，程序执行登出，从已登录设备中删除
          $('#restartDiv').remove();
          clickLogout();
        } else {
          setTimeout(function () {
            reconnect(szDeviceIdentify);
          }, 5000);
        }
      },
    });
  }

  // 开始升级
  var g_tUpgrade = 0;
  function clickStartUpgrade(szDeviceIdentify) {
    var szDeviceIdentify = $('#ip').val(),
      szFileName = $('#upgradeFile').val();

    if (null == szDeviceIdentify) {
      return;
    }

    if ('' == szFileName) {
      alert('请选择升级文件！');
      return;
    }
    if (FileTemp.size / 1024 / 1024 > 1024) {
      alert('升级包超过1G会失败，建议使用插件版本。');
    }
    $("<div id='restartDiv' class='freeze'></div>").appendTo('body');
    var oSize = getWindowSize();
    $('#restartDiv').css({
      width: oSize.width + 'px',
      height: oSize.height + 'px',
      lineHeight: oSize.height + 'px',
      left: 0,
      top: 0,
    });
    $('#restartDiv').text('开始升级，请耐心等待');

    WebVideoCtrl.I2_StartUpgrade(szDeviceIdentify, szFileName, FileTemp).then(
      function () {
        clearInterval(g_tUpgrade);
        g_tUpgrade = 0;

        $('#restartDiv').remove();

        WebVideoCtrl.I_Restart(szDeviceIdentify, {
          success: function (xmlDoc) {
            $("<div id='restartDiv' class='freeze'>重启中...</div>").appendTo(
              'body'
            );
            var oSize = getWindowSize();
            $('#restartDiv').css({
              width: oSize.width + 'px',
              height: oSize.height + 'px',
              lineHeight: oSize.height + 'px',
              left: 0,
              top: 0,
            });
            setTimeout("reconnect('" + szDeviceIdentify + "')", 20000);
          },
          error: function (status, xmlDoc) {
            showOPInfo(szDeviceIdentify + ' 重启失败！', status, xmlDoc);
          },
        });
      },
      function () {
        clearInterval(g_tUpgrade);
        $('#restartDiv').remove();
        showOPInfo(szDeviceIdentify + ' 升级失败！');
      }
    );
    // 首次延迟 2 秒
    setTimeout(() => {
      g_tUpgrade = setInterval(
        "getUpgradeStatus('" + szDeviceIdentify + "')",
        1000
      );
    }, 2000);
  }

  // 获取升级状态
  function getUpgradeStatus(szDeviceIdentify) {
    WebVideoCtrl.I_UpgradeProgress(szDeviceIdentify)
      .then(({ percent, upgrading }) => {
        if (percent < 0) {
          clearInterval(g_tUpgrade);
          g_tUpgrade = 0;
          showOPInfo(szDeviceIdentify + ' 获取进度失败！');
          return;
        } else if (percent < 100) {
          if (0 == $('#restartDiv').length) {
            $("<div id='restartDiv' class='freeze'></div>").appendTo('body');
            var oSize = getWindowSize();
            $('#restartDiv').css({
              width: oSize.width + 'px',
              height: oSize.height + 'px',
              lineHeight: oSize.height + 'px',
              left: 0,
              top: 0,
            });
          }
          $('#restartDiv').text(
            percent + '%' + '(升级过程需要1-10分钟，请耐心等待)'
          );
          return;
        }
      })
      .catch(() => {
        clearInterval(g_tUpgrade);
        g_tUpgrade = 0;
        $('#restartDiv').remove();
        showOPInfo(szDeviceIdentify + ' 升级失败！');
      });
  }

  function clickRestoreDefault() {
    var szDeviceIdentify = $('#ip').val(),
      szMode = 'basic';
    WebVideoCtrl.I_RestoreDefault(szDeviceIdentify, szMode, {
      timeout: 30000,
      success: function (xmlDoc) {
        $('#restartDiv').remove();
        showOPInfo(szDeviceIdentify + ' 恢复默认参数成功！');
        //恢复完成后需要重启
        WebVideoCtrl.I_Restart(szDeviceIdentify, {
          success: function (xmlDoc) {
            $("<div id='restartDiv' class='freeze'>重启中...</div>").appendTo(
              'body'
            );
            var oSize = getWindowSize();
            $('#restartDiv').css({
              width: oSize.width + 'px',
              height: oSize.height + 'px',
              lineHeight: oSize.height + 'px',
              left: 0,
              top: 0,
            });
            setTimeout("reconnect('" + szDeviceIdentify + "')", 20000);
          },
          error: function (status, xmlDoc) {
            showOPInfo(szDeviceIdentify + ' 重启失败！', status, xmlDoc);
          },
        });
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 恢复默认参数失败！', status, xmlDoc);
      },
    });
  }

  function clickRestoreDefaultAll() {
    var szDeviceIdentify = $('#ip').val(),
      szMode = 'full';
    WebVideoCtrl.I_RestoreDefault(szDeviceIdentify, szMode, {
      timeout: 30000,
      success: function (xmlDoc) {
        $('#restartDiv').remove();
        showOPInfo(szDeviceIdentify + ' 恢复默认参数成功！');
        //恢复完成后需要重启
        WebVideoCtrl.I_Restart(szDeviceIdentify, {
          success: function (xmlDoc) {
            $("<div id='restartDiv' class='freeze'>重启中...</div>").appendTo(
              'body'
            );
            var oSize = getWindowSize();
            $('#restartDiv').css({
              width: oSize.width + 'px',
              height: oSize.height + 'px',
              lineHeight: oSize.height + 'px',
              left: 0,
              top: 0,
            });
            setTimeout("reconnect('" + szDeviceIdentify + "')", 20000);
          },
          error: function (status, xmlDoc) {
            showOPInfo(szDeviceIdentify + ' 重启失败！', status, xmlDoc);
          },
        });
      },
      error: function (status, xmlDoc) {
        showOPInfo(szDeviceIdentify + ' 恢复默认参数失败！', status, xmlDoc);
      },
    });
  }

  function PTZZoomIn() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(10, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦+成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  调焦+失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZZoomout() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(11, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦-成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  调焦-失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZZoomStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(11, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦停止成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  调焦停止失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZFocusIn() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(12, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦+成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  聚焦+失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZFoucusOut() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(13, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦-成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  聚焦-失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZFoucusStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(12, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦停止成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  聚焦停止失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZIrisIn() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(14, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 光圈+成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  光圈+失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZIrisOut() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(15, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 光圈-成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  光圈-失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  function PTZIrisStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(14, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 光圈停止成功！');
        },
        error: function (status, xmlDoc) {
          showOPInfo(
            oWndInfo.szDeviceIdentify + '  光圈停止失败！',
            status,
            xmlDoc
          );
        },
      });
    }
  }

  // 切换模式
  function changeIPMode(iType) {
    var arrPort = [0, 7071, 80];

    $('#serverport').val(arrPort[iType]);
  }

  function loadXML(szXml) {
    if (null == szXml || '' == szXml) {
      return null;
    }

    var oXmlDoc = null;

    if (window.DOMParser) {
      var oParser = new DOMParser();
      oXmlDoc = oParser.parseFromString(szXml, 'text/xml');
    } else {
      oXmlDoc = new ActiveXObject('Microsoft.XMLDOM');
      oXmlDoc.async = false;
      oXmlDoc.loadXML(szXml);
    }

    return oXmlDoc;
  }

  function toXMLStr(oXmlDoc) {
    var szXmlDoc = '';

    try {
      var oSerializer = new XMLSerializer();
      szXmlDoc = oSerializer.serializeToString(oXmlDoc);
    } catch (e) {
      try {
        szXmlDoc = oXmlDoc.xml;
      } catch (e) {
        return '';
      }
    }
    if (szXmlDoc.indexOf('<?xml') == -1) {
      szXmlDoc = "<?xml version='1.0' encoding='utf-8'?>" + szXmlDoc;
    }

    return szXmlDoc;
  }

  function encodeString(str) {
    if (str) {
      return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
    } else {
      return '';
    }
  }
</script>
<style lang="scss" scoped>
  .arrange-btn {
    height: vw(32);
    width: vw(32);
    font-size: vw(28);
    color: #fff;
    cursor: pointer;

    &.is-active {
      color: #00fffc;
    }
    &:nth-last-of-type(1) {
      & + .arrange-divider {
        display: none;
      }
    }
  }
  .arrange-divider {
    --el-border-color: #00fffc;
    height: vw(28);
  }

  .player {
    height: 100%;
  }

  .setting-wrap {
  }
</style>
<style lang="scss">
  .setting-drawer-modal {
    width: 640px;
    right: 0;
    &.el-overlay {
      left: auto;
    }
  }
</style>
